<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>管理员登录</title>
    <script src="~/Content/Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<div style="height: 100%; width: 100%; float: left;">
    <div style="height: 35%; width: 100%; float: left;"></div>
    <div style="height: 30%; width: 40%; float: left;"></div>
    <form action="/loginZL" method="post">
        <div class="login">
            <div class="login_head">管理员登录</div>
            <div class="login_middle">
                <div style="height: 50%; width: 100%; text-align: center; padding-top: 30px;">
                    <input id="number" name="number" class="input" type="text" placeholder="请输入账号" />
                </div>
                <div style="height: 50%; width: 100%; text-align: center;">
                    <input id="Password" class="input" type="password"  name="password" placeholder="请输入密码" />
                </div>
            </div>
            <div class="login_bottom">
                <input  class="button"  type="submit" value="登录" οnclick="sendLoginData()" />
            </div>
        </div>
    </form>

</div>
</body>
</html>

<style type="text/css">

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        background: grey ;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .login {
        float: left;
        height: 30%;
        width: 20%;
        opacity: 0.8;
        background-color: #000;
        border-radius: 16px 16px 16px 16px;
    }
    .login_head {
        height: 25%;
        width: 100%;
        color: white;
        line-height: 200%;
        text-align: center;
        font-family: Andalus;
        font-size: 38px;
        font-weight: bold;
        border-bottom:1px solid #FFF;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .login_middle {
        height: 45%;
        width: 100%;
    }
    .login_bottom {
        height: 30%;
        width: 100%;
        padding-top: 22px;
    }
    .input {
        border: 1px solid #ffd800;
        background-color: #808080;
        height: 35px;
        width: 78%;
        font-family: Andalus;
        font-size: 20px;
        padding-left: 15px;
    }
    .button {
        color: gold;
        float: right;
        background-color: #000;
        font-size: 20px;
        height: 40px;
        width: 120px;
        margin-right: 20px;
        border-radius: 10px 10px 10px 10px;
        font-family: Andalus;
    }
    .button:hover {
        color: white;
        float: right;
        background-color: #808080;
        font-size: 25px;
        height: 40px;
        width: 120px;
        margin-right: 20px;
        border-radius: 10px 10px 10px 10px;
        font-family: Andalus;
    }

</style>

<script type="text/javascript">

    //回车键按下时执行 Login
    $("body").keydown(function (e) {
        e = e || event;
        if (e.keyCode == 13) {
            sendLoginData();
        }
    })

    //按下 Login 按钮
    function sendLoginData() {
        var userName = document.getElementById("UserName").value;
        var password = document.getElementById("Password").value;
        if (userName == "") {
            alert("UserName不能为空！");
            return;
        }
        if (password == "") {
            alert("Password不能为空！");
            return;
        }
        $.post("/Account/LoginVerification", { userName: userName, password: password },
            function (response) {
                if (response == 1) {
                    window.location.href = "/Admin/Index";
                } else {
                    alert("账户或密码错误！");
                }
            }, 'json');
    }

</script>